import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Edit, Trash2, Shield, MoreHorizontal } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";

export default function EmergencyMeasureTemplateCard({ template, onEdit, onDelete }) {
  const categoryLabels = {
    personnelInjury: "人员伤害",
    equipmentFailure: "设备故障",
    fireAccident: "火灾事故",
    electricShock: "触电事故",
    fallFromHeight: "高处坠落",
    environmentalIncident: "环境事件",
    trafficAccident: "交通事故",
    other: "其他"
  };

  const categoryColors = {
    personnelInjury: "bg-red-100 text-red-700",
    equipmentFailure: "bg-yellow-100 text-yellow-700",
    fireAccident: "bg-orange-100 text-orange-700",
    electricShock: "bg-amber-100 text-amber-700",
    fallFromHeight: "bg-purple-100 text-purple-700",
    environmentalIncident: "bg-green-100 text-green-700",
    trafficAccident: "bg-indigo-100 text-indigo-700",
    other: "bg-gray-100 text-gray-700"
  };

  return (
    <Card className="group hover:shadow-lg transition-shadow duration-300 bg-white flex flex-col" >
      <CardHeader className="pb-4">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
              <Shield className="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <CardTitle 
                className="text-base font-bold text-gray-800 cursor-pointer hover:text-blue-700"
                onClick={() => onEdit(template)}
              >
                {template.incidentType || '未命名事件'}
              </CardTitle>
              {/* <p className="text-sm text-gray-500 mt-1">
                编码: {template.code || 'N/A'}
              </p> */}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="opacity-0 group-hover:opacity-100 transition-opacity">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(template)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => onDelete(template.id)} className="text-red-600">
                <Trash2 className="w-4 h-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent className="space-y-3 flex-grow flex flex-col">
        {template.description && (
          <p className="text-sm text-gray-600 line-clamp-2 h-10">
            {template.description}
          </p>
        )}
        <div className="text-xs text-gray-500 pt-2 border-t mt-auto">
          <p>处置负责人: {template.responsiblePersonRole || '未指定'}</p>
          <p>应急设备: {template.requiredEquipment || '无'}</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge className={categoryColors[template.category] || categoryColors.other}>
            {categoryLabels[template.category] || template.category}
          </Badge>
        </div>
      </CardContent>
    </Card>
  );
}